<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { ref, onMounted, nextTick } from 'vue'
import { saveNote, getSubNoteType } from '@/api/home'
import { getByDictType } from '@/api/common'
import { message } from 'ant-design-vue'
import { DraggableModal } from '@/components/core/draggable-modal'

const props = defineProps({
  showSearchPageLink: {
    // 弹框是否展示返回综合查询link
    type: Boolean,
    default: true
  },
  insuredId: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['updateRemarkList', 'updateVisible'])
const labelCol = { span: 6 }
const wrapperCol = { span: 12 }
const fieldNames = { label: 'dictCName', value: 'dictCode' }
const rules = {
  noteContent: [{ trigger: 'blur', required: true, message: '请录入备注内容！' }],
  noteTypeCode: [
    {
      required: true,
      message: '请选择备注类型！',
      trigger: 'change'
    }
  ]
}
let formState = ref({
  noteContent: null,
  noteTypeCode: null,
  insuredNoteSubTypeCode: null
})
// 获取邮箱类型列表
let noteTypeList = ref([])
async function getNoteTypeList() {
  let res = await getByDictType({ dictType: 'NoteType' })
  if (res.isSuccess) {
    const list = []
    res.data &&
      res.data.length &&
      res.data.map((v) => {
        list.push({
          label: v.dictName,
          value: v.dictCode
        })
      })
    noteTypeList.value = list.filter((item) => {
      return ['03', '05'].includes(item.value)
    })
  }
}
let noteSubTypeList = ref([])
async function changeNoteType(val) {
  formState.value.insuredNoteSubTypeCode = ''
  noteSubTypeList.value = []
  if (!val) return
  let res = await getSubNoteType({
    noteTypeCode: formState.value.noteTypeCode
  })
  if (res.isSuccess) {
    const list = []
    res.data &&
      res.data.length &&
      res.data.map((v) => {
        list.push({
          label: v.codeDesc,
          value: v.code
        })
      })
    noteSubTypeList.value = list
    formState.value.insuredNoteSubTypeCode = list[0].value
  }
}
function initData() {
  getNoteTypeList()
}

const addRemarkVisible = ref(false)
onMounted(async () => {
  await nextTick()
  addRemarkVisible.value = true
  initData()
})
const formRef = ref()
const loading = ref(false)
function confirmSave() {
  formRef.value
    .validate()
    .then(async () => {
      loading.value = true
      const param = {
        ...formState.value,
        insuredId: props.insuredId
      }
      let res = null
      try {
        res = await saveNote(param)
      } catch (err) {
        console.log('err', err)
      } finally {
        loading.value = false
      }
      if (res?.isSuccess) {
        message.success('当前修改已完成，预计次日可查询到。')
        handleCancel()
        emit('updateRemarkList')
      }
    })
    .catch((error) => {
      console.log('error', error)
    })
}
function handleCancel() {
  addRemarkVisible.value = false
  emit('updateVisible', false)
}
</script>

<template>
  <DraggableModal
    v-model:open="addRemarkVisible"
    :showSearchPageLink="showSearchPageLink"
    width="480px"
    title="新增备注"
    @cancel="handleCancel"
  >
    <template #footer>
      <a-button @click="handleCancel">{{ $t('global.cancel') }}</a-button>
      <a-button type="primary" :loading="loading" @click="confirmSave">{{
        $t('global.save')
      }}</a-button>
    </template>
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="备注类型" name="noteTypeCode">
        <a-select
          v-model:value="formState.noteTypeCode"
          :allowClear="false"
          :options="noteTypeList"
          @change="changeNoteType"
          :placeholder="$t('global.PlaceholderSelect')"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="备注子类型" name="insuredNoteSubTypeCode">
        <a-select
          v-model:value="formState.insuredNoteSubTypeCode"
          :allowClear="false"
          :options="noteSubTypeList"
          :placeholder="$t('global.PlaceholderSelect')"
        >
        </a-select>
      </a-form-item>
      <a-form-item ref="noteContent" label="备注内容" name="noteContent">
        <a-textarea
          v-model:value="formState.noteContent"
          :rows="3"
          allow-clear
          :placeholder="$t('global.PlaceholderInput')"
        />
      </a-form-item>
    </a-form>
  </DraggableModal>
</template>
<style lang="scss" scoped></style>
